<template>
	<view class="container">
		<view class="room-cell" v-for="(item, index) in roomList" :key="item.id">
			<u-swipe-action btn-width="100" :options="options" :show="item.show" :index="index" @click="click" @open="open" >
				<view class="room-list" @click="setClassroom(item.id)">
					<view class="wd-flex room-list__head">
						<image class="icon" src="../../../static/icons/icon_classroom.png" mode="aspectFit"></image>
						<view class="wd-flex-cell">{{ item.name }}</view>
						<u-icon name="arrow-right" color="#D7D7D7" size="30" :label="item.people_count" label-pos="left" label-size="26" label-color="#666" margin-left="15"></u-icon>
					</view>
					
				</view>
			</u-swipe-action>
		</view>
		<view class="wd-floating" @click="setClassroom(0)">
			<u-icon name="plus" color="#fff" size="30" label="新增教室" label-size="16" label-color="#fff" label-pos="bottom"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [
					{
						text: '停用',
						style: {
							whiteSpace: 'nowrap',
							fontSize: '24rpx',
							backgroundColor: '#D8D8D8'
						}
					},
					{
						text: '启动',
						style: {
							whiteSpace: 'nowrap',
							fontSize: '24rpx',
							backgroundColor: '#6D4BBE'
						}
					}
				],
				roomList: [],
				roomListMore:{page:1}
			}
		},
		onLoad(){
			this.fetch();
		},
		
		// 页面到达底部触发
		onReachBottom() {
			this.fetch();
		},
		methods: {
			refreshPage(){
				this.roomList = [];
				this.roomListMore = {page:1}
				this.fetch()
			},
			//获取教室
			fetch() {
				let shop = this.$core.getCurrentShop();
				let shop_id = shop.id;
				this.$utils.fetch(this, 'fitness.manage/classroom_list', {shop_id:shop_id}, 'roomListMore', 'roomList', 'data', data=>{
				
				})
			},
			//场馆详情
			setClassroom(e){
				let classroom_id = e ? e : 0;
				let that = this;
				uni.navigateTo({
					url: "/pages/user/roomDetail/roomDetail?classroom_id="+classroom_id,
					events:{
						setSuccess:function(data){
							that.refreshPage()
						}
					}
				})
			},
			
			click(index, index1) {
				let that = this;
				that.$set(that.roomList[index],'show',false)
				let visible_switch = 0;
				if(index1 == 1) {
					visible_switch = 1;
				}
				that.$core.post({url:'fitness.manage/room_status',data:{classroom_id:that.roomList[index].id,visible_switch:visible_switch},success:(ret)=>{
					that.$u.toast(ret.msg);
				}});
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.$set(this.roomList[index],'show',true)
				this.roomList.map((val, idx) => {
					if(index != idx) {
						this.$set(this.roomList[idx],'show',false)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 1rpx 0;
		background: #F6F6F6;
	}
	.room-cell {
		margin: 24rpx;
		border-radius: 24rpx;
		overflow: hidden;
		/deep/ .u-swipe-content {
			overflow: hidden;
		}
	}
	.room-list {
		padding: 32rpx;
		background: #FFFFFF;
		&__head {
			line-height: 45rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			.icon {
				display: block;
				margin-right: 16rpx;
				width: 46rpx;
				height: 46rpx;
			}
		}
		&__label {
			display: flex;
			flex-wrap: wrap;
			padding-left: 62rpx;
			.tag {
				display: block;
				margin: 16rpx 16rpx 0 0;
			}
			/deep/ .u-size-default {
			    padding: 8rpx 22rpx;
				font-size: 24rpx;
			}
		}
	}
</style>